<template>
  <div>
      <city-header></city-header>
      <city-search></city-search>
      <city-list :hotCities="hotCities" :allCities ="allCities" :letter="letter"></city-list>
      <alpha-bet :allCities ="allCities" @letterChange="letterChange" ></alpha-bet>
  </div>
</template>
<script>
import CityHeader from './components/CityHeader'
import CitySearch from './components/CitySearch'
import CityList from './components/CityList'
import AlphaBet from './components/alphabet'
import axios from 'axios'
export default {
  name:'City',
  components:{
      CityHeader,
      CitySearch,
      CityList,
      AlphaBet
  },
  data(){
    return {
      hotCities: new Array(),
      allCities: new Object(),
      letter:''
    }
  },
  methods:{
    getCityInfo(){
       axios.get('/api/city.json').then(this.getCityInfoCallBack)
    },
    getCityInfoCallBack(res){
      console.log(res)
      var _this = this
      res = res.data;
      if(res.ret&&res.data){
           _this.hotCities = res.data.hotCities;
           _this.allCities = res.data.cities;
      }   
    },
    letterChange(letter){
       this.letter = letter;
    }
  },
  mounted(){
   this.getCityInfo();
  }
}
</script>
<style lang="scss" scoped>

</style>
